<script setup>
import {onMounted, ref} from "vue";
import {useRoute} from "vue-router";
import AUTnavMM from "@/components/utils/AUTnavMM.vue";
import {AApprovedSong, AArriveSong, aBanSong, aGetSongME, ANoExamine} from "@/api/api.js";
import NavMenu from "@/components/utils/navMenu.vue";
import {ElMessageBox, ElNotification} from "element-plus";

const route = useRoute()

let song = ref({
  song_ID: "",
  song_name: "",
  singer_name: "",
  album_name: "",
  created_Time: "",
  song_Directory: "",
  song_Cover: "",
  lyric: "",
  examine: "",
})
let examination = ref("")
onMounted(() => {
  let song_ID = route.query.song_ID
  getSongMe(song_ID)
})

function getSongMe(song_ID) {
  aGetSongME(song_ID).then(resp => {
    if (resp.data.code === 200) {
      song.value = resp.data.data
      //允许vite访问根路径之外的文件，有安全风险。在vite.config.js中修改strict为true可变为不允许
      song.value.song_Cover = "/@fs/D:/Workspeace/vue3/" + resp.data.data.song_Cover
      song.value.song_Directory = "/@fs/D:/Workspeace/vue3/" + resp.data.data.song_Directory
      console.log(song.value)
    } else {
      console.log(resp.data.msg)
    }
  })
}

function noExamine(song_ID, song_Name) {
  if (examination.value == "") {
    ElNotification({
      message: "请填写审核不通过原因，以便用户改进",
      type: "error",
      position: 'top-left',
    })
  } else {
    ElMessageBox.confirm('确认不通过' + song_Name + '？', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(_ => {
      aBanSong(song_ID, song_Name,examination.value).then(resp => {
        if (resp.data.code === 200) {
          ElNotification({
            message: "审核完成",
            type: "success",
            position: 'top-left',
          })
        } else {
          console.log(resp.data.msg)
        }
      })
    }).catch(_ => {
    });
  }
}

function successEX(song_ID, song_Name) {
  ElMessageBox.confirm('确认通过' + song_Name + '？', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(_ => {
    AApprovedSong(song_ID, song_Name).then(resp => {
      if (resp.data.code === 200) {
        ElNotification({
          title: song_Name + "审核通过！",
          type: 'success',
          duration: 1000,
          position: 'top-left',
        })
      } else {
        console.log(resp.data.msg)
      }
    })
    song.value.examine = "1"
  }).catch(_ => {
  });
}

function ArriveSong(song_ID, song_Name) {
  ElMessageBox.confirm('确认重新上架' + song_Name + '？', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(_ => {
    AArriveSong(song_ID, song_Name).then(resp => {
      if (resp.data.code === 200) {
        ElNotification({
          title: song_Name + "已重新上架通过！",
          type: 'success',
          duration: 1000,
          position: 'top-left',
        })
      } else {
        console.log(resp.data.msg)
      }
    })
    song.value.examine = "1"
  }).catch(_ => {
  });
}

function banSong(song_ID, song_Name) {
  if (examination.value == "") {
    ElNotification({
      message: "下架需填写原因请填写在审核建议处填写原因，以便用户改进",
      type: "error",
      position: 'top-left',
    })
  } else {
    ElMessageBox.confirm('是否确认下架' + song_Name + '？', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(_ => {
      aBanSong(song_ID, song_Name,examination.value).then(resp => {
        if (resp.data.code === 200) {
          ElNotification({
            title: song_Name + "已下架！",
            type: 'success',
            duration: 1000,
            position: 'top-left',
          })
        } else {
          console.log(resp.data.msg)
        }
      })
      song.value.examine = "-1"
    }).catch(_ => {
    });
  }
}
</script>

<template>
  <AUTnavMM></AUTnavMM>
  <div style="display: flex">
    <nav-menu ref="childRef" :default_index="3"></nav-menu>
    <div class="songME_mod">
      <el-scrollbar>
        <div class="box_mod" id="box_md">
          <div>
            <div class="songME_Info_title">
              歌曲信息
            </div>
            <div class="songME_Info_mod">
              <img :src=song.song_Cover>
              <div class="songME_Info_mod_text">
                <div class="text_item songNm">{{ song.song_name }}</div>
                <div class="text_item">{{ song.singer_name }}</div>
                <div class="text_item">{{ song.album_name }}</div>
                <div class="text_item">{{ song.created_Time }}</div>
              </div>
            </div>
          </div>
          <div>
            <div class="songME_Info_title">
              音频
            </div>
            <div class="songME_audio">
              <audio controls :src="song.song_Directory"></audio>
            </div>
          </div>
          <div>
            <div class="songME_Info_title">
              歌词
            </div>

            <div class="songME_lyric_mod">
              <el-scrollbar max-height="400px">
                {{ song.lyric }}
              </el-scrollbar>
            </div>

          </div>
          <div>
            <div class="songME_Info_title">审核建议</div>
            <div style="margin-bottom: 50px;">
              <el-input
                  v-model="examination"
                  style="width: 50%"
                  :autosize="{ minRows: 4 }"
                  type="textarea"
                  placeholder="审核建议"
              />
            </div>
          </div>
          <div>
            <div class="songME_Info_title">审核意见</div>
            <div class="songME_option" v-if="song.examine==0">
              <el-button style="margin-right: 50px" size="large" type="danger" plain
                         @click="noExamine(song.song_ID,song.song_name)">不通过
              </el-button>
              <el-button size="large" type="warning" plain @click="successEX(song.song_ID,song.song_name)">通过
              </el-button>
            </div>
            <div class="songME_option" v-if="song.examine==-1">
              <el-button style="margin-right: 50px" size="large" type="danger" plain>取消
              </el-button>
              <el-button size="large" type="success" plain @click="ArriveSong(song.song_ID,song.song_name)">重新上架
              </el-button>
            </div>
            <div class="songME_option ban" v-if="song.examine==1">
              <el-alert title="歌曲已通过审核" type="success" :closable="false" center show-icon/>
              <div style="margin-top: 20px">
                <el-button style="margin-right: 50px" size="large" type="danger" plain>取消
                </el-button>
                <el-button size="large" type="success" plain @click="banSong(song.song_ID,song.song_name)">下架
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<style scoped>
.box_mod {
  background-color: #f5f5f5;
  border-radius: 12px;
  box-shadow: 0px 0px 6px 1px #d7d7d7;
  margin-bottom: 20px;
  padding: 20px 30px;
}

.songME_mod {
  width: 80%;
  max-height: 816px;
  padding-left: 20px;
  padding-top: 20px;
}

.songME_Info_title {
  margin-bottom: 20px;
  max-width: 20%;
  font-family: STXihei, serif;
  font-size: 20px;
  font-weight: bolder;
}

.songME_Info_mod {
  display: flex;
  align-items: center;
  padding-left: 5%;
  margin-bottom: 50px;
}

.songME_Info_mod img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: #e58c43;
}

.songME_Info_mod_text {
  margin-left: 40px;
  font-family: STXihei, serif;
  font-size: 15px;
}

.text_item {
  margin-bottom: 10px;
}

.text_item.songNm {
  font-size: 25px;
  font-weight: bolder;
}

.songME_audio {
  padding-left: 5%;
  margin-bottom: 50px;
  min-width: 50%;
  min-height: 80px;
  display: flex;
  align-items: center;
}

.songME_lyric_mod {
  display: flex;
  padding-left: 5%;
  margin-bottom: 50px;
  background: #ffffff;
  padding-top: 20px;
  padding-bottom: 20px;
  white-space: pre-wrap;
}

:deep(.el-textarea__inner:focus) {
  box-shadow: 0 0 0 1px #e58c43;
}

.songME_option {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}

.songME_option.ban {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;
}
</style>